<template>
	<view class="fu-p-y-30">
		<demo-desc margin="0 15px">
			此组件一般用于在特殊情况下，需要自定义导航栏的时候用到，一般建议使用uni-app带的导航栏。
		</demo-desc>
		
		<fu-section title="基本案例" customClass="fu-m-t-20 fu-m-x-30" type="line"></fu-section>
		<fu-nav-bar leftIcon="left" title="个人中心" @clickLeft="$mUtils.overBack()"></fu-nav-bar>
		
		<fu-section title="自定义文本" customClass="fu-m-t-20 fu-m-x-30" type="line"></fu-section>
		<fu-nav-bar leftIcon="left" leftText="返回" title="个人中心" rightIcon="location" @clickLeft="$mUtils.overBack()"></fu-nav-bar>
		
		<fu-section title="自定义插槽" customClass="fu-m-t-20 fu-m-x-30" type="line"></fu-section>
		<fu-nav-bar title="个人中心" leftWidth="80" rightWidth="80" @clickLeft="$mUtils.overBack()">
			<template v-slot:left>
				<view class="fu-flex fu-flex-column-center">
					<fu-icons name="left" size="20"></fu-icons>
					<fu-line length="15" direction="col" margin="0 10px" color="#CCCCCC"></fu-line>
					<fu-icons name="home-fill" size="21"></fu-icons>
				</view>
			</template>
		</fu-nav-bar>
	</view>
</template>

<script setup>
	import { getCurrentInstance } from 'vue';
	
	// data数据
	const { $mUtils } = getCurrentInstance().appContext.config.globalProperties;
</script>

<style>
</style>